<!--
* @description 验证失败
* @author zywu
* @date 2022/05/12 13:54:23
!-->
<template>
  <div class="device-verify-fail">
    <div class="e-nav-bar">
      <div class="e-nav-bar__title e-flex-y-center e-flex-between e-pt-10">
        <div class="e-f-24 e-bold">验证结果</div>
        <div class="e-flex-y-center e-flex-between e-color-999" @click="exit">
          <div class="e-mr-5">退出验证</div>
          <i class="iconfont icon-tuichu e-f-22"></i>
        </div>
      </div>
    </div>
    <div style="height:80px;"></div>
    <div class="e-p-15">
      <div class="e-flex-column e-flex-center e-flex-items-center">
        <img class="device-verify-fail-icon" src="@/assets/img/addDevice/verify-fail.png" />
        <div class="e-color-999 e-f-18 e-bold e-mt-15">{{title||'验证失败'}}</div>
        <van-divider class="e-mt-30" style="width:100%;border-color:#E1E1E1;" />
      </div>
      <div class="e-mt-10 e-f-14">
        <div class="e-bold e-color-333">问题排查步骤：</div>
        <div v-for="(n,i) in list" :key="i">
          <div class="e-bold e-color-333 e-mt-20">{{n.title}}</div>
          <div class="e-color-333 e-mt-5" v-for="(m,mi) in n.description" :key="mi">{{m}}</div>
        </div>
      </div>
    </div>
    <div style="height:80px;"></div>
    <div class="e-fixed-b e-bg-white e-flex-y-center e-p-15">
      <van-button class="e-flex-grow" type="default" size="large" @click="goEdit">检查</van-button>
      <van-button class="e-flex-grow van-button--theme e-ml-15" size="large" @click="goVerify">重新验证</van-button>
    </div>
  </div>
</template>

<script>
import api from '@/api/apiConfig'
export default {
  components: {},

  data() {
    return {
      list: [],
      title: '',
      isDTU: false,
      isOnline: false,
    }
  },

  computed: {},

  created() {
    this.isDTU = this.$route.params.typeObj.pid == 110
    this.isOnline = this.$route.params.isOnline
    this.getConfig()
  },

  methods: {
    getConfig() {
      let { id, pid } = this.$route.params.typeObj
      api
        .getJSON({
          url:
            `/ilink-app-h5-zd/static/addDevice/tip/${pid}-${id}.json?` +
            new Date().getTime(),
          method: 'get',
        })
        .then(({ data }) => {
          if (data.fail) {
            this.title = data.fail.title || ''
            this.list = data.fail.tips
          }
        })
    },
    goEdit() {
      let { id, deviceNo } = this.$route.params
      this.$router.replace({
        name: 'DeviceForm',
        params: {
          ...this.$route.params,
          data: {
            recordId: this.isDTU ? deviceNo : id,
            businessType: this.isDTU ? 2 : 1,
          },
          from: 'VerifyFail',
        },
      })
    },
    goVerify() {
      this.$router.replace({
        name: 'Verifying',
        params: this.$route.params,
      })
    },
    exit() {
      this.$router.replace({
        name: 'AddDevice',
      })
    },
  },
}
</script>
<style lang='scss'>
.device-verify-fail {
  &-icon {
    width: 218px;
    height: 127px;
  }
}
</style>